<template>
	<view class="user-wrapper">
		<!-- 1分公司  2代理商  3销售 -->
		<custom-nav v-if="userInfo.user_type==1" title="分公司" themeColor="#333"></custom-nav>
		<custom-nav v-if="userInfo.user_type==2" title="代理商" themeColor="#333"></custom-nav>
		<custom-nav v-if="userInfo.user_type==3" title="销售" themeColor="#333"></custom-nav>
		<view class="user-header" @click="mingpian">
			<image class="header-bg" src="../../static/img/agent/bg.png"></image>
			<view class="user-logininfo">
				<view class="user-left s-flex-r-s-c">
					<image :src="info.avatar"></image>
					<view class="r">
						<view style="color: #333;">{{info.nickname}}</view>
						<view class="mob" style="color: #333;">{{info.mobile}}</view>
					</view>
				</view>
				<view class="user-more">
					<!-- <up-icon name="arrow-right" color="#fff" size="16"></up-icon> -->
					<image v-if="userInfo.user_type==3" class="qrcode" :src="$BASE_URL+rqcard"></image>
				</view>
			</view>
		</view>
		<view class="user-bigmenu">
			<view class="flex1 s-flex-c-c-c">
				<view class="menu_info">
					<text class="val">{{info.order_count}}</text>
					<text class="unit">个</text>
				</view>
				<view class="menu_title">
					<text>订单数</text>
				</view>
			</view>
			<up-line direction="col" length="70rpx" color="#D9D9D9"></up-line>
			<view class="flex1 s-flex-c-c-c">
				<view class="menu_info">
					<text class="val">{{info.order_commission_money}}</text>
					<text class="unit">元</text>
				</view>
				<view class="menu_title">
					<text>分红金额</text>
				</view>
			</view>
		</view>
		<view class="user-smallmenu">
			<up-grid :border="false" col="3">
				<up-grid-item>
					<view class="small_menu_info"  @click="go('/pages/my/kehu/wode_kehu/wode_kehu')">
						<view class="detail">
							<view class="sm_menu_tit">客户</view>
							<view class="sm_menu_val" style="color: #2025A3;">{{info.user_count}}</view>
						</view>

						<image class="sm_bg" src="../../static/img/agent/kehu.png"></image>
					</view>
				</up-grid-item>
				<up-grid-item v-if="userInfo.user_type==1||userInfo.user_type==2">
					<view class="small_menu_info" @click="xiaoliang">
						<view class="detail">
							<view class="sm_menu_tit">销售</view>
							<view class="sm_menu_val" style="color: #149C92;">{{info.sale_count}}</view>
						</view>

						<image class="sm_bg" src="../../static/img/agent/xiaoshou.png"></image>
					</view>
				</up-grid-item>
				<up-grid-item v-if="userInfo.user_type==1" @click="dailishang">
					<!-- <view class="small_menu_info" > -->
						<view class="small_menu_info" >
						<view class="detail">
							<view class="sm_menu_tit">代理商</view>
							<view class="sm_menu_val" style="color: #CF7828;">{{info.agent_count}}</view>
						</view>

						<image class="sm_bg" src="../../static/img/agent/dailishang.png"></image>
					</view>
				</up-grid-item>
			</up-grid>
		</view>
		<view class="user-content">
			<view class="user-list">
				<view class="user-item" @click="dingdan">
					<view class="user-left">
						<image class="user-item-icon" src="../../static/img/agent/logo-order.png"></image>
						<text>我的订单</text>
					</view>
					<view class="user-more">
						<image src="../../static/img/user/more.png"></image>
					</view>
				</view>
				<view class="user-item" @click="fenhonsg">
					<view class="user-left">
						<image class="user-item-icon" src="../../static/img/agent/logo-money.png"></image>
						<text>我的分红</text>
					</view>
					<view class="user-more">
						<image src="../../static/img/user/more.png"></image>
					</view>
				</view>
				<view class="user-item" @click="kehu">
					<view class="user-left">
						<image class="user-item-icon" src="../../static/img/agent/logo-people.png"></image>
						<text>客户管理</text>
					</view>
					<view class="user-more">
						<image src="../../static/img/user/more.png"></image>
					</view>
				</view>
				
				<view class="user-item" @click="xiaoliang" v-if="userInfo.user_type==1||userInfo.user_type==2">
					<view class="user-left">
						<image class="user-item-icon" src="../../static/img/agent/logo-sale.png"></image>
						<text>销售管理</text>
					</view>
					<view class="user-more">
						<image src="../../static/img/user/more.png"></image>
					</view>
				</view>
				<!-- 1分公司  2代理商  3销售 -->
				<view class="user-item" @click="dailishang" v-if="userInfo.user_type==1">
					<view class="user-left">
						<image class="user-item-icon" src="/static/img/agent/logo-dai.png"></image>
						<text>代理商管理</text>
					</view>
					<view class="user-more">
						<image src="../../static/img/user/more.png"></image>
					</view>
				</view>
				<!-- <view class="user-item">
					<view class="user-left">
						<image class="user-item-icon" src="/static/img/agent/logo-sale.png"></image>
						<text>销售管理</text>
					</view>
					<view class="user-more">
						<image src="../../static/img/user/more.png"></image>
					</view>
				</view>
				<view class="user-item">
					<view class="user-left">
						<image class="user-item-icon" src="/static/img/agent/logo-dai.png"></image>
						<text>代理商管理</text>
					</view>
					<view class="user-more">
						<image src="../../static/img/user/more.png"></image>
					</view>
				</view> -->
			</view>
		</view>
		<view class="user-adver">
			<!-- <image src="../../static/img/user/adver.png" @click="handleMakePhone"></image> -->
			<image src="../../static/img/user/adver.png" @click="handleMakePhone"></image>
		</view>

	</view>
</template>

<script setup>
	import customNav from '@/components/custom-nav.vue'
	import {
		ref,
		unref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const userInfo = ref({})
	const info = ref({})
	const rqcard = ref("")
	function mingpian(){
		uni.navigateTo({
		      
				 url: '/pages/my/ming_pian/ming_pian'
		      });
		
	}
	function dailishang(){
		uni.navigateTo({
				 url: '/pages/my/daili_shang/daili_shang_gl/daili_shang_gl'
		      });
		
	}
	function kehu(){
		uni.navigateTo({
		        url: '/pages/my/kehu/wode_kehu/wode_kehu'
		      });
	}
	function dingdan(){
		uni.navigateTo({
		        url: '/pages/my/dingdan/wode_dingdan/wode_dingdan'
		      });
	}
	function xiaoliang(){
		uni.navigateTo({
		      
				 url: '/pages/my/xiao_liang/xiaoliang_guanli/xiaoliang_guanli'
		      });
		
	}
	function fenhonsg(){
		uni.navigateTo({
		        // url: 'pages/my/fenhong/wode_fenhong/wode_fenhong'
				 url: '/pages/my/fenhong/wode_fenhong/wode_fenhong'
		      });
	}
	
	//我的服务
	function skipService() {
		uni.navigateTo({
			url: '/pages/my/service/index'
		})
	}
	function handleMakePhone() {
		uni.makePhoneCall({
			phoneNumber: '4009996666'
		})
	}
	//我的资料
	function skipMyInfo() {
		uni.navigateTo({
			url: '/pages/my/editInfo'
		})
	}
	function skipTracks() {
		uni.navigateTo({
			url: '/pages/my/tracks'
		})
	}
	function handleCollect() {
		uni.navigateTo({
			url: '/pages/my/collection'
		})
	}
	function getUserData() {
		proxy.$request({
			url: 'api/User/getSaleAgentBranchDetail',
			header: "application/x-www-form-urlencoded",
			// 1分公司  2代理商  3销售
			data: {type:userInfo.value.user_type}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				info.value = res.data
	
			}
		})
	}
	
	function getUserData0() {
		proxy.$request({
			url: 'api/User/getUserInfo',
			header: "application/x-www-form-urlencoded",
			data: {}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				userInfo.value = res.data
				getUserData()
				// 销售有二维码
				if(userInfo.value.user_type==3){
					getMyCard()
				}
			}
		})
	}
	getUserData0()
	function getMyCard() {
		proxy.$request({
			url: '/api/User/getMyCard',
			header: "application/x-www-form-urlencoded",
			data: {}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				rqcard.value = res.data.qrcode
			}
		})
	}
</script>

<style lang="scss" scoped>
	.user-wrapper {
		background: #f8f8f8;
		padding-bottom: 100rpx;
		.user-header {
			image {
				width: 100%;
				height: 390rpx;
			}


			// background-color: #FF7139;
		}

		.user-smallmenu {
			padding: 0 32rpx;

			.small_menu_info {
				position: relative;
				overflow: hidden;
				width: 216rpx;
				height: 132rpx;
				border-radius: 16rpx;

				.detail {
					position: absolute;
					left: 30rpx;
					top: 30rpx;
					z-index: 1;
					.sm_menu_tit {
						color: #666666;
						font-size: 28rpx;
					}

					.sm_menu_val {
						font-weight: bold;
						font-size: 36rpx;
					}
				}



				.sm_bg {
					width: 100%;
					height: 100%;


				}
			}
		}

		.user-bigmenu {
			position: relative;
			background: #fff;
			width: 686rpx;
			height: 178rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;

			top: -30rpx;


			.menu_info {
				color: #FF7139;

				.val {
					font-weight: bold;
					font-size: 42rpx;
				}

				.unit {
					font-size: 24rpx;
				}
			}

			.menu_title {
				color: #666;
				font-size: 28rpx;
				margin-top: 8rpx;
			}
		}

		.user-logininfo {
			position: absolute;
			top: 200rpx;
			display: flex;
			align-items: center;
			width: 680rpx;
			padding: 0 32rpx;
			justify-content: space-between;

			.user-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.mob{
					margin-top: 6rpx;
					font-size: 24rpx;
					color: #999999;
					line-height: 28rpx;
				}
				image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
					position: relative;
					top: 3rpx;
					border-radius: 50%;
				}

				color: #fff;

			}

			.user-more {

				// image {
				// 	width: 28rpx;
				// 	height: 28rpx;
				// }
				.qrcode {
					width: 108rpx;
					height: 108rpx;
				}

			}
		}

		.user-content {
			background: #fff;

			.user-list {
				.user-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 108rpx;
					line-height: 108rpx;
					padding: 0 34rpx;
					border-bottom: 4rpx solid #f8f8f8;
				}

				.user-left {
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
						position: relative;
						top: 3rpx;
					}
				}

				.user-more {
					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}

		.user-adver {
			text-align: center;

			image {
				margin: 0 auto;
				width: 686rpx;
				height: 158rpx;
			}
		}
	}
</style>